import ListViewAdapter from './ListViewAdapter';
import EventBus from '../../utils/event-bus';
import _ from 'lodash';

const ListMixin = {
  name: 'ListMixin',
  data() {
    return {
      // 当前Tab页的code
      currentTabMx: '',
      // 当前快速搜索值
      searchValueMx: '',
      // 分页查询数据, 包含排序参数
      queryParamsMx: {
        current: 1,
        size: 20,
      },
      // 筛选数据
      filterResultMx: {},
      // 列表信息返回的总条目
      totalCountMx: 0,
      // 列表加载状态
      isLoadingMx: false,
      // 列表数据源
      listDataMx: [],
      // 列表已选择条目
      selectedCountMx: 0,
    };
  },
  methods: {
    onTabChangeMx(tab) {
      this.currentTabMx = tab;
      this.refreshListDataMx();
    },
    onResetMx() {
      delete this.queryParamsMx.ascs;
      delete this.queryParamsMx.descs;
    },
    onFilterChangeMx(filterEvent) {
      console.log('接收到的筛选事件 ==>', filterEvent);
      switch (filterEvent.type) {
        case 'submit':
          this.listViewAdapter.onFilterSubmit(filterEvent.data);
          break;
        case 'action':
          break;
        case 'tab':
          break;
      }
      /*
      {
      	"page": {
      		"current": 1,
      		"size": 20,
      		"ascs": "",
      		"descs": ""
      	},
      	"orderCityCode": 350200,
      	"storeId": "ff8080816c19ca1b016c1ca145a10001",
      	"createTime": ["2020-04-01 00:00:00", "2021-05-31 23:59:59"],
      	"orderGoodsType": "2",
      	"isPayToCompany": true,
      	"status": 1
      }
      *
      * */
      this.queryParamsMx.current = 1;
      this.refreshListDataMx();
    },
    onSortChangeMx(sortEvent) {
      console.log('接收到的排序事件 ==>', sortEvent);
      const { order, prop } = sortEvent;
      if (order === 'ascending') {
        this.queryParamsMx.ascs = prop;
        this.queryParamsMx.descs = '';
      } else {
        this.queryParamsMx.ascs = '';
        this.queryParamsMx.descs = prop;
      }
      this.queryParamsMx.current = 1;
      this.refreshListDataMx();
    },
    /**
     * @description: 列表页码变更, 需要重新获取数据
     * @param {currentPage} 当前选定的页码
     */
    onPageChangeMx(currentPage) {
      console.log('onPageChangeMx ==>', currentPage);
      this.queryParamsMx.current = currentPage;
      this.refreshListDataMx();
    },
    /**
     * @description: 列表页码变更, 需要重新获取数据
     * @param {pageSize} 当前选定的页码
     */
    onSizeChangeMx(pageSize) {
      console.log('onSizeChangeMx ==>', pageSize);
      this.queryParamsMx.size = pageSize;
      this.queryParamsMx.current = 1;
      this.refreshListDataMx();
    },
    /**
     * @description: 刷新列表数据, 根据当前queryParams查询列表数据
     */
    refreshListDataMx() {
      this.listViewAdapter.queryHandler();
    },
    // 选中发生改变
    selectChangeMx(e) {
      if (Array.isArray(e)) {
        this.selectedCountMx = e.length;
      }
    },
    setQueryHandler(handler) {
      this.listViewAdapter.queryHandler = handler;
      this.listViewAdapter.queryHandler();
    },
    getFilterParams() {
      return this.filterResultMx;
    },
    getPageParams() {
      const page = {
        current: this.queryParamsMx.current,
        size: this.queryParamsMx.size,
        ascs: this.queryParamsMx.ascs,
        descs: this.queryParamsMx.descs,
      };
      if (!page.ascs) {
        delete page.ascs;
      }
      if (!page.descs) {
        delete page.descs;
      }
      return page;
    },
    // 滚动条事件
    onDragChangeMx(position) {
      try {
        const tableWrapperDom = document.getElementsByClassName('el-table__body-wrapper')[0];
        const tableDom = document.getElementsByClassName('el-table__body')[0];
        const tableWrapperRect = tableWrapperDom.getBoundingClientRect();
        const tableDomRect = tableDom.getBoundingClientRect();
        const tableWidth = tableDomRect.width;
        const tableWrapperWidth = tableWrapperRect.width;
        tableWrapperDom.scrollLeft = Math.round((tableWidth - tableWrapperWidth) * position);
        // tableWrapperDom.style.overflow = 'hidden';
        tableWrapperDom.classList.add('hide-scrollbar');
      } catch (e) {

      }
    },
    // 将表格滚动交给用户自己运行
    enableTableDragControllerMx() {
      try {
        const tableWrapperDom = document.getElementsByClassName('el-table__body-wrapper')[0];
        tableWrapperDom.addEventListener('scroll', this.onListHorizontalScroll);
      } catch (e) {

      }
    },
    onListHorizontalScroll: _.throttle(function(e) {
      const width = e.srcElement.clientWidth;
      const left = e.srcElement.scrollLeft;
      const totalWidth = e.srcElement.scrollWidth;
      const realPosition = left / (totalWidth - width);
      EventBus.$emit('TABLE_HORIZONTAL_SCROLL', realPosition);
    }, 20)
  },
  mounted() {
    this.listViewAdapter = new ListViewAdapter(this);
  },
};

export default ListMixin;
